# Phase 4B — 视觉升级方案

> 日期: 2026-07-07 | 解决: Phase 4A v3 画面偏 UI、主体偏小、真实感不足

---

## 1. Phase 4A v3 问题诊断

| 问题 | 表现 | 解决方案 |
|------|------|----------|
| 画面偏 UI 可视化 | 卡片/面板/列表像系统界面 | 加入终端、文件、manifest 等真实工作流证据，但脱敏 |
| 真实操作感不足 | 看不到"人"在操作 | 加入终端打字效果、搜索过程、筛选过程 |
| 部分主体偏小 | 卡片占比不够大 | 主体 75%–90%，全宽条纹替代居中卡片 |
| CTA 不够强 | 文字号召力不足 | 下一条预告做成独立视觉高潮 |

## 2. 视觉升级手段

### 2.1 真实工作流证据（脱敏处理）

| Scene | 证据类型 | 脱敏处理 | 实现方式 |
|:-----:|----------|----------|----------|
| S05 | 终端界面 | 路径/用户名替换为 `[user]/[project]` | HTML/CSS 模拟终端 + 打字机动画 |
| S05 | 搜索关键词 | 只展示关键词，不展示 API 调用 | 关键词放大动画 |
| S06 | 评分表 | 分数值用 [score] 替代，展示排序过程 | CSS 排序动画 |
| S07 | 下载 manifest | 文件名列表，不展示路径/大小 | HTML 列表布局 |

### 2.2 主体占比提升

| 类型 | v3 | v4 目标 |
|------|:--:|:-------:|
| 大字标题 | 80% 宽度 | **90% 宽度，全出血** |
| 错误卡片 | 85% 宽度 | **92% 宽度** |
| 列表/条纹 | 90% 宽度 | **94% 宽度** |
| 视觉高潮元素 | 居中 60% | **覆盖 80% 画面** |
| 空黑背景 | ~15% | **≤10%** |

### 2.3 视觉动作密度

| 指标 | v3 | v4 目标 |
|------|:--:|:--------:|
| 每 scene 动画数 | 2–4 | **4–6** |
| 视觉高潮/scene | 0–1 | **≥1** |
| 镜头运动(scene内) | 少数 | **缩放/抖动/闪白/推进** |
| 错误状态冲击 | 变色 | **红色爆炸 + 抖动 + 残影** |
| 成功状态反馈 | 发光 | **放大 + 脉冲 + 金色 glow ×2** |

### 2.4 具体动画升级

| 效果 | CSS 实现 |
|------|----------|
| 镜头推进 | `transform: scale(1)→scale(1.15)` 配合 `opacity` |
| 抖动 | `@keyframes shake { 0%,100%{translateX(0)} 25%{translateX(-8px)} 75%{translateX(8px)} }` |
| 闪白 | 全屏白色 overlay `opacity: 0→0.3→0` 持续 0.1s |
| 错误爆炸 | 红色 radial-gradient 从中心扩散 + 碎片飞出 |
| 成功脉冲 | `box-shadow: 0 0 20px → 0 0 60px → 0 0 20px` |
| 残影 | 多个 `text-shadow` 层逐渐淡出 |

## 3. Scene 级视觉升级

### S01 钩子 (0:00-0:05)

- 0.0s: "2000条爆款" 140px 从中心炸开，全出血
- 0.3s: 闪白 0.1s
- 0.5s: 红色 ERROR 覆盖，抖动
- 1.2s: 文字裂开 (3 层 text-shadow 错位)
- 2.5s: 缩小过渡到 Scene 02

### S02 翻车现场 (0:05-0:15)

- 每张卡片 92% 宽度，从边缘飞入
- 卡片进入时带轻微抖动
- 底部假数据链路预览

### S05 真实采集 (0:40-0:55)

- 终端模拟：绿色字体，`$` 前缀，打字机效果
- 搜索词放大：从终端飞出到画面中央
- 数字增长：0→89 在终端旁边同步
- 关键词卡片从终端数据中"提取"出来

### S06 评分筛选 (0:55-1:10)

- 评分面板：每行数据 + 分数条 + 排序
- Top20：金色高亮 + glow
- 排除项：灰色淡出

### S08 结构拆解 (1:25-1:40)

- 五模块：钩子/节奏/字幕/结果/CTA
- 每个模块出现时带对应 icon
- 连线动画：SVG 路径动画或 CSS dash-offset

### S09 CTA (1:40-1:50)

- "AI 视频工厂第一步" 白色逐字
- "不是生成" 大字
- "是真实数据" 金色爆炸 72px
- 下一条预告蓝色科技框
- 关注理由 20px 底部